<template>
    <div class="tool" style="margin: 20px 0;display: flex;">
        <el-input v-model="className" placeholder="班级" style="width: 240px;margin-right: 20px;"/>
        <el-button style="margin-right: 20px;" type="primary" @click="handleSearch">搜索</el-button>
        <el-button style="margin-right: 20px;" type="primary" @click="handleAdd">添加人员</el-button>


    </div>
    <el-table :data="students" style="width: 100%">
        <el-table-column label="学号" prop="no" width="180"/>
        <el-table-column label="姓名" prop="name" width="180"/>
        <el-table-column label="组别" prop="group_name"/>
        <el-table-column label="班级" prop="class_name"/>
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button
                    link
                    size="small"
                    type="primary"
                    @click="handleViewClick(scope.row)"
                >
                    查看
                </el-button>
                <el-button link size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button link size="small" type="primary" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination-block" style="margin-top: 20px; display: flex; justify-content: flex-end;">
        <el-pagination :current-page="currentPage" :default-page-size="5" :total="total"
                       background
                       layout="prev, pager, next"
                       size="small"
                       @current-change="handleCurrentChange"
        />
    </div>
    <!-- 新增的对话框组件 -->
    <el-dialog v-model="dialogVisible" title="人员信息" width="900">
        <Stat v-if="dialogVisible" :id="rowId"/>
    </el-dialog>
    <el-dialog v-model="addDialogVisible" :title="isEdit?'编辑':'新增'+'人员'" width="900">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="学号">
                <el-input v-model="form.no"/>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.name"/>
            </el-form-item>
            <el-form-item label="班级">
                <el-input v-model="form.class_name"/>
            </el-form-item>
            <el-form-item label="组别">
                <el-input v-model="form.group_name"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="onSubmit">{{ isEdit ? '修改' : '新增' }}</el-button>
            <el-button @click="addDialogVisible = false">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
// 这里是逻辑代码
import {onMounted, ref} from "vue"; // 定义对话框是否可见的状态
import axios from "axios";
import {ElMessage} from "element-plus";
import Stat from "./Stat.vue";

const dialogVisible = ref(false);
const addDialogVisible = ref(false);
const students = ref([]);
const currentPage = ref(1);
const total = ref(0);
const className = ref('');
const isEdit = ref(false);

// import Stat from "@/components/Stat.vue";
const subjects = ref([]);
// 定义一个 ref 来引用 DOM 元素
const subject_ids = ref([]);


onMounted(() => {
    getStudents();

});
const getStudents = () => {
    axios.get('/api/students?page=' + currentPage.value + '&className=' + className.value).then((response) => {
        students.value = response.data.data.data;
        total.value = response.data.data.total;
    });
}
const handleCurrentChange = (number) => {
    currentPage.value = number
    getStudents();
}

const form = ref({no: '', name: "", class_name: '', group_name: ''});
const onSubmit = () => {
    if (isEdit.value) {
        axios.put("/api/students/" + form.value.id, form.value).then((response) => {
            console.log(response.data);
            addDialogVisible.value = false;
            getStudents();
            form.value = {}
        });
    } else {
        axios.post("/api/students", form.value).then((response) => {
            console.log(response.data);
            addDialogVisible.value = false;
            getStudents();
            form.value = {}
        });
    }

}
const handleSearch = () => {
    getStudents()


}
const rowId = ref('')

const handleViewClick = (row: any) => {
    rowId.value = row.id
    dialogVisible.value = true;


};

const handleAdd = () => {
    isEdit.value = false
    addDialogVisible.value = true
}
const handleEdit = (row: any) => {
    isEdit.value = true
    addDialogVisible.value = true
    axios.get('/api/students/' + row.id).then((response) => {
        form.value = response.data.data;
    });
}
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        '是否确认删除?',
        '提示',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete('/api/students/' + row.id).then((response) => {
                ElMessage({
                    message: '删除成功.',
                    type: 'success',
                })
                getStudents();
            })


        })
}


</script>

<style scoped>
.pagination-block {
    margin-top: 10px;
    text-align: right;
}
</style>
